<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: gainsboro;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color:#bfa;
				margin:0 auto;
				margin-top: 100px;
				
				
				/*
				 变形就是指通过CSS来改变元素的形状或位置
				 -变形不会影响到页面的布局
				 -transform 用来设置元素的变形效果
				     -平移
				        transformX（） 沿着x轴方向平移
				        transformY（） 沿着y轴方向平移
				        transformZ（） 沿着Z轴方向平移
				        平移元素，百分比是相对于自身计算的
				        * */
			}
			/*.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
				margin: 0 auto;
				
			}*/
			
			.box3{
				/*width: 100px;
				height: 100px;*/
				
				background-color:orange;
				position: absolute;
				/*
				 * 这种居中方式，只适用于元素的大小确定
				 * left：0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;*/
				
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				/*多个变形之间用空格隔开，
				 一个元素只能设置一个transform，否则第二个一定会覆盖第一个，第一个不会生效*/
			}
			
			
			/*盒子浮动的效果*/
			.box4,.box5{
				width: 220px;
				height: 300px;
				background-color: #fff;
				float: left;
				margin-left: 10px;
				transition: all .3s;
				
			}
			.box4:hover,.box5:hover{
				transform: translateY(-5px);
				box-shadow: 0 0 10px rgba(0 ,0 ,0,.3 );
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3">哈哈哈</div>
		<div class="box5"></div>
		<div class="box4"></div>
	</body>
</html>
